<template>
  <view class="chat-page">
    <scroll-view scroll-y="true" class="message-list" :scroll-top="scrollTop">
      <block v-for="(item, index) in messages" :key="index">
        <view class="message" :class="{ 'is-mine': item.isMine }">
          <view class="avatar">
            <image :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="content">
            <div class="phone-file" v-if="item.isMine===false">
              <image src="/static/images/kefu.png" mode="aspectFill" class="image-kefu"></image>
            </div>
            <view class="text" v-if="item.isMine==false">{{ item.text }}</view>
            <view class="text-isMine" v-if="item.isMine==true">{{ item.text }}</view>
            <div class="phone-isMine" v-if="item.isMine===true">
              <image src="/static/images/profile.jpg" mode="aspectFill" class="image-kefu"></image>
            </div>
          </view>
        </view>
      </block>
    </scroll-view>
    <view class="input-area">
      <input type="text" placeholder="输入消息" v-model="messageDto.message" @confirm="onSocket"/>
      <button type="primary" size="mini" @click="sendMessage">发送</button>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      messages: [
        {text: "你好", isMine: false, avatar: 'https://example.com/avatar1.jpg'},
      ],
      scrollTop: 0,
      messageDto: {
        advancedTime: '',
        message: '',
        orderId: '',
        rang: '',
        receiveId: ''
      },
      userId: 1204,
      message: '',
      ws:null
    };
  },
  onLoad() {
    this.onSocket()
  },
  methods: {
    onSocket() {
      uni.connectSocket({
        url: 'ws://127.0.0.1:8082/websocket/driver/' + this.userId,
      });
      uni.onSocketOpen(function (res) {
        console.log('WebSocket连接已打开！');
        uni.sendSocketMessage({
          data: "你好"
        });
      })
        uni.onSocketMessage(function (res) {
          console.log(res.data);
          this.messageDto = res.data
      //      显示弹窗
      // uni.showToast({
      //   icon: 'none', // 设置图标为无
      //   duration: 2500, // 设置持续时间为 1 秒
      //   mask: true, // 显示遮罩层
      //   title: JSON.stringify(this.messageDto.message, null, 2)
      // });
        });
      uni.onSocketError(function (res) {
        console.log('WebSocket连接打开失败，请检查！');
      });
    },
    sendMessage() {
      if (this.ws) {
        this.ws.send({
          data: this.messageDto.message,
          success: () => {
            console.log('发送成功');
          },
          fail: () => {
            console.log('发送失败');
          }
        });
      }
    }
  },
};
</script>


<style scoped lang="scss">
.text-isMine {
  position: relative;
  right: -140px;
  width: fit-content;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 20px;
  padding-right: 10px;
  background-color: chartreuse;
}

.phone-isMine {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  right: -270px;
  top: -35px;
}

.image-kefu {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
}

.phone-file {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  left: -45px;
  top: 35px;
}

.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-list {
  flex: 1;
  overflow-y: auto;
}

.message {
  position: relative;
  top: -60px;
  margin-left: 50px;
}

.message.is-mine {
  justify-content: flex-end;
  width: fit-content;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.avatar.is-mine {
  margin-left: 10px;
  margin-right: 0;
}

.content {
  position: relative;
  width: 250px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.text {
  display: flex;
  width: fit-content;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 20px;
  padding-right: 10px;
  word-break: break-all;
  background-color: white;
}

.input-area {
  height: 80px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

input {
  flex: 1;
  margin-right: 10px;
}
</style>








